<template>
  <div id="login">

    <div class="login-container">
        <el-form  ref="form" status-icon  :rules="rules" :model="form" label-width="80px">
        <el-form-item label="用戶名" prop="username">
          <el-input v-model="form.username" style="width:95%"></el-input>
        </el-form-item>
        
         <el-form-item label="密碼" prop="password">
          <el-input  v-model="form.password" style="width:95%"></el-input>
        </el-form-item>

        <div class="button-container">
          
            <el-button type="primary" @click="submitForm('form')" >登入</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
    name:'login',
    data() {
      return {
         form: {
            username: '',
            password: '',
          },
         rules:{
            username: [
                { required: true, message: '请输入用戶名', trigger: 'blur' },
                { min: 5, max: 100, message: '长度在 5 个字符以上', trigger: 'blur' }
              ],
            password:[
                { required: true, message: '请输入密碼', trigger: 'blur' },
                { min: 6, max: 100, message: '长度在 8 个字符以上', trigger: 'blur' }
            ]
         }
      
     }
    },
    methods: {
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            var that=this;
            this.$axios.get("http://localhost:8081/login?username="+this.form.username+"&password="+this.form.password)
            .then((result) => {
               //console.log(result.data);
              if(result.data=="ok"){
                that.$router.push("/homepage")
              }else{
                  this.$message.error('帳號或者密碼錯誤');
              }
            }).catch((err) => {
              
            });


          } else {
            this.$message({
              showClose: true,
              message: '用戶或者密碼錯誤',
              type: 'error'
            });
            return false;
          }
        });
      }

    },
    mounted() {
      
    },
}
</script>

<style>
   #login{
     width: 40%;
     height: 200px;
     border: 1px solid;
     border-radius: 40px;
     border-color: #C0C4CC;
     padding: 30px;
     padding-top: 20px;
     box-shadow: 0px 0px 2px 2px #C0C4CC;
     position: absolute;
     top: 30%;
     left: 30%;
    
   }
   .welcome{
     width: 100%;
     padding-bottom: 40px;
   }
   .login-container{
     
   }
   .button-container{
     width:250px;
   }
</style>